<template>
  <div class="categoryContainer">

    <van-search @click="toSearch"  input-align="center" placeholder="请输入搜索关键词" />
    <!-- 内容区 -->
    <div class="fontaine">
      <!-- 左边导航 -->
      <div class="left">
        <van-sidebar v-model="active" class="navList" >
          <div v-for="item in categoryL1List" :key='item.id'>
            <van-sidebar-item class="navItem" :title="item.name"  
            @click="check(item.id)"
            >
          </van-sidebar-item>
          </div>
        </van-sidebar>
      </div>
      <!-- 右边导航 -->
      <div class="right">
        <div class="rightScroll">
          <div class="rightMain">
            <img class="rightImg" :src=" bannerList" alt="" />
          </div>
          <!-- 商品分类 -->
          <div class="cateList" v-for="(item,index) in categoryGroupList" :key="index" >
            <div class="rightText">{{ item.name }}</div>
            <ul class="subCategoryList">
              <li class="item" @click="toList(item.id)" v-for="item in categoryL2List" :key="item.id">
                <img class="itemImg" :src="item.wapBannerUrl" alt="" />
                <p class="itemText">{{ item.name }}</p>
              </li>
            </ul>
          </div>
        

        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted ,ref ,watch} from 'vue';
  import { reqChooseList} from '../../api/category';
  import { useRouter } from 'vue-router';
  // 推选好物列表
  const categoryL1List =ref<any>([])
  // 左侧内容区
  const  categoryL2List=ref<any>([])
  // 右边标题
  const  categoryGroupList =ref<any>([])
  // 存入每次点击的id
  const categoryId = ref(11)
  // 中间广告图
  const bannerList=ref<any>()
  // 获取推选好物左边列表
  const getCategoryL1List = async()=>{
    let res = await reqChooseList(categoryId.value)
    // console.log(res);
    
    
    // 推选好物列表
    categoryL1List.value =res.data.categoryL1List;
   // 左侧内容区
    categoryL2List.value =res.data.categoryL2List;
    // 右边标题 
    categoryGroupList.value= res.data.categoryGroupList
    // 中间广告
    bannerList.value =res.data.currentCategory.bannerList[0].picUrl
  }
  // 获得左侧列表中的id
   const check= (id: number)=>{
    
    categoryId.value=id
    
   }

   const router = useRouter()
   const toSearch = () => {
    router.push('/search')
   }


   /* 跳转到列表页面 */
   const toList = (id:any) => {
    router.push({
      path:'/goodslist',
      query:{
        id:categoryId.value,
        subId:id
      }
    })
   }


  onMounted(()=>{
     // 获取推选好物 
     getCategoryL1List()
  })
  watch(
    categoryId,
    ()=>{
      getCategoryL1List()
      
    }
  )
</script>




<script lang="ts">
export default {
  name: "category",
  data() {
    return {
      active: 0,
    };
  },
};


</script>

<style lang="scss" scoped>
.categoryContainer {
  width: 100%;
  overflow: hidden;
}
// 内容区
.fontaine {
  display: flex;
  width: 100%;
  position: relative;
  overflow: scroll;
  border-top: 1px solid #ccc;
  height: 100%;
}

.left {
  overflow: scroll;
  position: relative;
  border-right: 1px solid #ccc;

  .navItem {
    width: 81px;
    text-align: center;
  }
}
.right {
  flex: 1;
  padding-right: 3%;
  overflow: scroll;
  padding: 15px;
  position: relative;
  .rightScroll {
    height: calc(100vh - 44px);
    .rightMain{
      background-color: #ddd;
      .rightImg {
        width: 264px;
        height: 96px;
        margin: 0 auto;
      }
    }
  }
  .cateList {
    .rightText {
      margin-top: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 264px;
      padding-bottom: 4px;
      margin-bottom: 12px;
      text-align: left;
      font-size: 18px;
      font-weight: 700;
      color: #333;
      border-bottom: 1px solid #d9d9d9;
    }

    .subCategoryList {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 33.33333%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .itemImg {
          width: 72px;
          height: 72px;
        }
        .itemText {
          font-size: 14px;
        }
      }
    }
  }
}

.van-sidebar-item{
  padding:15px 0;
}
</style>
